<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./bootstrap-5.3.6-dist/css/bootstrap.css">
    <script src="/static/fronts/static/vue-2.5.16-dist/vue.min.js"></script>
    <script src="/static/fronts/static/axios-0.18.0-dist/axios.min.js"></script>
    <script src="/static/fronts/static/echarts.common.min.js"></script>
    <script src="/static/fronts/static/jquery-3.4.1.min.js"></script>


  <title>存储视图</title>
    <style>
    .cell {
        width:28px;
        height:28px;
        font-size: 12px;
        line-height: 28px;
        padding: 4px;
        text-align: center;
    }

    /* 表格外层容器，可控制整体宽度、居中 */
    .material-table-wrap {
        width: 100%;
        margin: 0 auto;
        padding: 1px;
        font-family: "Microsoft YaHei", sans-serif; /* 选用清晰的中文字体 */
    }

    /* 表格基础样式重置与美化 */
    .material-table-wrap table {
        width: 100%;
        border-collapse: collapse; /* 合并边框，让线条更整洁 */
        text-align: left;
        border-radius: 6px;
        overflow: hidden; /* 配合圆角，避免单元格边框溢出 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影增加层次感 */
    }

    /* 表头样式 */
    .material-table-wrap thead {
        background-color: #f5f7fa;
    }

    .material-table-wrap th {
        padding: 10px 10px;
        font-weight: 500;
        color: #676a6c;
        border-bottom: 2px solid #e6e9ed;
    }

    /* 单元格样式 */
    .material-table-wrap td {
        padding: 3px;
        border-bottom: 1px solid #e6e9ed;
        color: #555;
        vertical-align: middle; /* 垂直居中，让内容对齐更美观 */
    }

    /* 奇偶行区分（可选，增强可读性） */
    .material-table-wrap tbody tr:nth-child(even) {
        background-color: #fafbfc;
    }

    /* 鼠标悬浮行高亮 */
    .material-table-wrap tbody tr:hover {
        background-color: #f1f3f6;
        transition: background-color 0.3s ease;
    }

    /* 处理钢印号等可能换行的内容，让换行更规整 */
    .material-table-wrap td {
        white-space: normal; /* 按需调整，若想强制不换行可设为nowrap，结合overflow */
        word-break: break-word; /* 长文本自动换行 */
    }

    /* 若有特殊状态（如待入库数量为0等，可扩展样式做标识） */
    .material-table-wrap td.empty-stock {
        color: #ff4d4f; /* 红色标识特殊状态 */
        font-weight: 500;
    }


    /* 遮罩样式 */
    .loading-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .loading-mask.active {
        opacity: 1;
        visibility: visible;
    }

    .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3b82f6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }


    /* 使用更具体的类名避免冲突 */
    .custom-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 1000;
    }

    .custom-modal-content {
        position: absolute;
        background: white;
        padding: 20px;
        border-radius: 8px;
        min-width: 300px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        border: 1px solid #ddd;
    }



    </style>

    <style type="text/tailwindcss">
        @layer utilities {
            .select-container {
                @apply relative w-full max-w-md;
            }

            .custom-select {
                @apply w-full px-4 py-3 pr-10 bg-white border border-gray-300 rounded-lg appearance-none
                focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary
                transition-all duration-200 ease-in-out cursor-pointer;
            }

            .select-icon {
                @apply absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-secondary;
            }

            .select-label {
                @apply block text-sm font-medium text-gray-700 mb-1.5;
            }

            .select-hint {
                @apply text-xs text-gray-500 mt-1.5;
            }

            .selected-value {
                @apply mt-4 p-3 bg-blue-50 border border-blue-100 rounded-lg;
            }
        }


    </style>
</head>


<body>

      <div id="app" class="p-3" style="overflow-y: auto">
          <div class="mb-5">
          <div class="text-center text-primary fs-4 mb-2">LK01-库位状态</div>
              <div>
                  <label for="basicSelect" class="select-label">排/巷道:</label>
                  <select id="basicSelect" class="custom-select"  onchange="showSelectedValue(this)">
                      <option value="">-- 请选择 --</option>
                      <option value="L01-R01" selected>L01/R01</option>
                      <option value="L02-R01">L02/R01</option>
                      <option value="L03-R02">L03/R02</option>
                      <option value="L04-R02">L04/R02</option>
                  </select>
              </div>
<!--              <div v-show="curline == 1">-->
              <div id= "L01-R01" v-show="curline == 1">
              <div class="d-flex justify-content-center">
                  <div style="overflow-x: auto;white-space: nowrap;overflow-y: hidden;">
                      <div class="fw-bold text-center">L01/R01</div>
                      <div class="d-flex" v-for="(layer,index) in cellsLine01" :key="'layer-' + index">
                          <div class="cell" >{{layerTotal-index}}层</div>
                          <div v-for="cell in layer" class="cell border" @click="showDetail(cell.storages[0].locationCode)" :class="getCellClassbyStyleClass(cell.styleclass)">
                          </div>
                      </div>
                      <div class="d-flex">
                          <div class="cell">#</div>
                          <div class="cell" v-for="column in columnTotal">{{column}}</div>
                      </div>
                  </div>
              </div>
              </div>

<!--              <div v-show="curline == 2">-->
              <div id= "L02-R01" v-show="curline == 2">
              <div class="d-flex justify-content-center">
                  <div style="overflow-x: auto;white-space: nowrap;overflow-y: hidden;" >
                  <div class="fw-bold text-center">L02/R01</div>
                  <div class="d-flex" v-for="(layer,index) in cellsLine02" :key="'layer-' + index">
                      <div class="cell">{{layerTotal-index}}层</div>
                      <div v-for="cell in layer" class="cell border" @click="showDetail(cell.storages[0].locationCode)" :class="getCellClassbyStyleClass(cell.styleclass)">
                      </div>
                  </div>
                  <div class="d-flex">
                      <div class="cell">#</div>
                      <div class="cell" v-for="column in columnTotal">{{column}}</div>
                  </div>
                  </div>
              </div>
              </div>

<!--              <div v-show="curline == 3">-->
              <div id= "L03-R02" v-show="curline == 3">
              <div class="d-flex justify-content-center">
                  <div style="overflow-x: auto;white-space: nowrap;overflow-y: hidden;" >
                  <div class="fw-bold text-center">L03/R02</div>
                  <div class="d-flex" v-for="(layer,index) in cellsLine03" :key="'layer-' + index">
                      <div class="cell">{{layerTotal-index}}层</div>
                      <div v-for="cell in layer" class="cell border" @click="showDetail(cell.storages[0].locationCode)"  :class="getCellClassbyStyleClass(cell.styleclass)">
                      </div>
                  </div>
                  <div class="d-flex">
                      <div class="cell">#</div>
                      <div class="cell" v-for="column in columnTotal">{{column}}</div>
                  </div>
                  </div>
              </div>
              </div>

<!--              <div v-show="curline == 4">-->
              <div id= "L04-R02" v-show="curline == 4">
              <div class="d-flex justify-content-center">
                  <div style="overflow-x: auto;white-space: nowrap;overflow-y: hidden;" >
                  <div class="fw-bold text-center">L04/R02</div>
                  <div class="d-flex" v-for="(layer,index) in cellsLine04" :key="'layer-' + index">
                      <div class="cell">{{layerTotal-index}}层</div>
                      <div v-for="cell in layer" class="cell border" @click="showDetail(cell.storages[0].locationCode)"  :class="getCellClassbyStyleClass(cell.styleclass)">
                      </div>
                  </div>
                  <div class="d-flex">
                      <div class="cell">#</div>
                      <div class="cell" v-for="column in columnTotal">{{column}}</div>
                  </div>
                  </div>
              </div>
              </div>
          </div>

          <div style="position: fixed; right: 12px;top: 12px;">
              <div class="d-flex gap-2" style="font-size: 12px;">
              <div class="text-bg-success p-1 mb-1">实物托盘</div>
              <div class="text-bg-info p-1 mb-1">空托盘</div>
              <div class="text-bg-secondary p-1 mb-1">空闲</div>
              <div class="text-bg-warning p-1 mb-1">封存</div>
              </div>
          </div>


<!--          <div class="d-flex justify-content-center gap-3">-->
<!--          <div class="card" style="width: 18%;">-->
<!--              <div class="card-header text-center">{{summary.lineCode}}</div>-->
<!--              <div class="card-body p-3" id="summary-chart" style="height:200px;"></div>-->
<!--          </div>-->
<!--          <div class="card" v-for="(item, index) in lineStorageSummarys" style="width: 18%;">-->
<!--              <a href="#" class="card-header text-center" @click="curline=index+1">{{item.lineCode}}</a>-->
<!--              <div class="card-body p-3" :id="'layer-chart-' + index" style="height:200px;"></div>-->
<!--          </div>-->
<!--          </div>-->

          <div id="detailTabDiv" >
              <!-- 加载遮罩 -->
              <div id="loadingMask" class="loading-mask">
                  <div class="spinner"></div>
              </div>
              <div class="material-table-wrap" style="overflow-x: auto">
                  <div >
                      <table>
                          <thead>
                          <tr>
                              <th width="30px">#</th>
                              <th width="110px">货位编码</th>
                              <th width="110px">物料编码</th>
                              <th width="150px">物料名称</th>
                              <th width="60px">wbs</th>
                              <th width="100px" align="center">容器号</th>
                              <th width="50px" align="center">数量</th>
                              <th width="50px" align="center">单位</th>
                              <th width="100px"> 供应商</th>
                              <th width="60px">客户</th>
                              <th width="160px" align="center">入库时间</th>
                          </tr>
                          </thead>
                          <tbody id="table-body-detail">
                          <!-- 表格内容将通过 jQuery 动态添加 -->
                          </tbody>
                      </table>
                  </div>
              </div>
          </div>

          <div id="myCustomModal" class="custom-modal-overlay">
              <div id="customModalContent" class="custom-modal-content">
                  <span class="custom-close" style="float:right;cursor:pointer;font-size:20px;color:#666;">&times;</span>
                  <p id="titleInfo" style="font-weight: bold;">弹框标题信息</p>
                  <img id="previewImage" src="" alt="图片预览" style="width: 700px; height: 450px;">
              </div>
          </div>


      </div>



</body>


<script>
    $(document).ready(function(){
        $("#detailTabDiv").hide();

        $('#myCustomModal').hide();

        // 关闭弹窗 - 点击关闭按钮
        $('.custom-close').click(function() {
            closeCustomModal();
        });

        // 点击外部关闭
        $(window).click(function(event) {
            if ($(event.target).is('#myCustomModal')) {
                closeCustomModal();
            }
        });

    });


    //var baseUrl_ = "http://218.0.56.239:10120/monitor/storagemap/query";
    var baseUrl_ = "/monitor/storagemap/query";
    //var baseUrl_ = "http://172.20.10.11:8410";
    //var baseUrl_ = "http://localhost:8410/monitor/storagemap/query";
    //var baseUrl_ = "http://localhost:9060/monitor/storagemap/query";
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    axios.interceptors.request.use((config) => {
        return config;
    }, error => {
        return Promise.reject(error);
    });

    axios.interceptors.response.use(response=> {
        return response.data;
    }, function (error) {
        return Promise.reject(error);
    });

    var app = new Vue({
        el: '#app',
        data:{
            curline:1,
            cellsLine01:[],
            cellsLine02:[],
            cellsLine03:[],
            cellsLine04:[],
            columnTotal:50,
            layerTotal:9,
            lineStorageSummarys:[],
            summary:{},
            detailData:[],
        },
        mounted() {
            this.fetchLinedetails();
            this.fetchSummarys();
        },
        methods:{
            fetchLinedetails() {
                axios.get(baseUrl_ + '/v2/linedetails'+'?linecode=L01/R01').then(resp => {
                    this.cellsLine01 = resp.data;
            });
                axios.get(baseUrl_ + '/v2/linedetails'+'?linecode=L02/R01').then(resp => {
                    this.cellsLine02 = resp.data;
            });
                axios.get(baseUrl_ + '/v2/linedetails'+'?linecode=L03/R02').then(resp => {
                    this.cellsLine03 = resp.data;
            });
                axios.get(baseUrl_ + '/v2/linedetails'+'?linecode=L04/R02').then(resp => {
                    this.cellsLine04 = resp.data;
            });
            },
            fetchSummarys() {
                axios.get(baseUrl_ + '/linessummary').then(resp => {
                    this.lineStorageSummarys = resp.data;
                return axios.get(baseUrl_ + '/summary')
            }).then(resp => {
                    this.summary = resp.data;
                Vue.nextTick(() => {
                this.initChart();
            })
            });
            },

            initChart() {
                //-----汇总整个仓库-----
                var chartSummary = echarts.init(document.getElementById("summary-chart"), "light", {
                    renderer: "svg"
                });
                // 汇总整个仓库配置项和数据
                var optionSummary = {
                    series: [
                        {
                            type: "pie",
                            label:{            //饼图图形上的文本标签
                                normal:{
                                    show:true,
                                    position:'inner', //标签的位置
                                    textStyle : {
                                        fontWeight : 300 ,
                                        fontSize : 16    //文字的字体大小
                                    },
                                    formatter:'{d}%'
                                }
                            },
                            data: [
                                { value: this.summary.usingRatio, name: "使用", itemStyle:{color:'#99CC66'} },
                                { value: this.summary.containRatio, name: "空托", itemStyle:{color:'#CCFF99'} },
                                { value: this.summary.freeRatio, name: "空闲", itemStyle:{color:'#99CCFF'} },
                                { value: this.summary.holdRatio, name: "锁定", itemStyle:{color:'#FFFF99'} },
                                { value: this.summary.damageRatio, name: "封存", itemStyle:{color:'#999999'} }
                            ]
                        }
                    ]
                };
                chartSummary.setOption(optionSummary);

                //-----按"排"汇总-----
                for (var index in this.lineStorageSummarys ) {
                    echarts.init(document.getElementById("layer-chart-" + index), "light", {
                        renderer: "svg"
                    }).setOption({
                        series: [
                            {
                                type: "pie",
                                label:{            //饼图图形上的文本标签
                                    normal:{
                                        show:true,
                                        position:'inner', //标签的位置
                                        textStyle : {
                                            fontWeight : 200 ,
                                            fontSize : 14    //文字的字体大小
                                        },
                                        formatter:'{b} {d}%'
                                    }
                                },
                                data: [
                                    { value: this.lineStorageSummarys[index].usingRatio, name: "使用", itemStyle:{color:'#99CC66'}},
                                    { value: this.lineStorageSummarys[index].containRatio, name: "空托", itemStyle:{color:'#CCFF99'} },
                                    { value: this.lineStorageSummarys[index].freeRatio, name: "空闲", itemStyle:{color:'#99CCFF'} },
                                    { value: this.lineStorageSummarys[index].holdRatio, name: "锁定", itemStyle:{color:'#FFFF99'} },
                                    { value: this.lineStorageSummarys[index].damageRatio, name: "封存", itemStyle:{color:'#999999'} }
                                ]
                            }
                        ]
                    })
                }
            }
        }
    });

    function getCellClassbyStyleClass(styleclass) {
        if (styleclass === 'use-use') {
            return 'bg-success'
        } else if (styleclass === 'epal-epal') {
            return 'bg-info'
        } else if (styleclass === 'free-free') {
            return 'bg-secondary'
        } else if (styleclass === 'dem-dem') {
            return 'bg-warning'
        } else {
            return 'bg-secondary-subtle'
        }
    }

    function showDetail(locationCode){
        $('#myCustomModal').hide();
        // 显示遮罩
        showLoadingMask();
        let queryDetailUrl = "/monitor/storagemap/query/details";
        $("#detailTabDiv").show();
        axios.get(queryDetailUrl + '?locationcode='+locationCode).then(resp => {
            this.detailData = resp.data;
            //console.info(resp);
            const tableBody = $('#table-body-detail');
            tableBody.empty();
            $.each(resp.data, function (index, item) {
                const row = $('<tr>');
                const idxCell = $('<td>').text(index+1);
                //const locCell = $('<td>').text(item.locationcode);
                const locCell = $('<td>').append(
                    $('<a>')
                        .attr('href', 'javascript:void(0)')  // 防止链接跳转
                        .text(item.locationcode)
                        .on('click', function() {
                            showImage(item.locationcode,item.containernumber,item.imageurl);  // 调用images函数
                        })
                );

                const itemCodeCell = $('<td>').text(item.materialcode);
                const itemNameCell = $('<td>').text(item.materialname);
                let wbsCell;
                if(item.wbsnumber !== null){
                    wbsCell = $('<td>').text(item.wbsnumber.replace(/\*/g, ""));
                }else{
                    wbsCell = $('<td>').text("");
                }
                const qtyCell = $('<td>').text(item.quantity);
                const containerCell = $('<td>').text(item.containernumber);
                const uomCell = $('<td>').text(item.uomcode);
                const supplierCell = $('<td>').text(item.suppliercode);
                const custCell = $('<td>').text(item.customercode);
                const recTimeCell = $('<td>').text(item.receivetime);
                row.append(idxCell,locCell, itemCodeCell, itemNameCell,wbsCell, containerCell,qtyCell,uomCell,supplierCell,custCell,recTimeCell);
                tableBody.append(row);
            });
            // 隐藏遮罩
            hideLoadingMask();
        });
    }

    function showImage(locationCode,containerNumber,imagePath){
        if(!imagePath || imagePath.trim() === ''){
            alert("图片路径不能为空！");
            return;
        }
        let queryImageUrl = "/monitor/storagemap/query/loadImg";
        $.ajax({
            type: 'GET',
            url: queryImageUrl,
            data: {
                imagePath: imagePath.trim()
            },
            success: function(response) {
                console.log('请求成功:', response);
                if (response.success) {
                    // 打开弹窗
                    openModalAtPosition(250, 100);
                    $('#titleInfo').text('货位:'+locationCode+"  容器号:"+containerNumber+" 拍照图片");
                    const webUrl = response.webUrl;
                    const fileName = response.fileName;
                    console.log("weburl: "+webUrl);
                    // 设置图片src并显示
                    $('#previewImage')
                        .attr('src', webUrl)
                        .attr('alt', fileName)
                        .on('load', function() {
                            console.log("图片加载成功！");
                        })
                        .on('error', function() {
                            console.log("图片加载失败！");
                        });
                } else {
                    alert('加载失败: ' + response.message);
                }
            },
            error: function(xhr, status, error) {
                console.error('请求失败:', error);
                alert('请求失败: ' + error);
            }
        });
    }

    function closeCustomModal() {
        $('#myCustomModal').fadeOut();
    }

    function openModalAtPosition(x, y) {
        debugger;
        const $modalContent = $('#customModalContent');

        $modalContent.css({
            'top': y + 'px',
            'left': x + 'px',
            'transform': 'none' // 取消居中变换
        });

        $('#myCustomModal').fadeIn();
    }



    function showSelectedValue(selectElement) {
        $("#detailTabDiv").show();
        // 获取选中的值和文本
        const selectedValue = selectElement.value;
        hiddenAll();
        if(selectedValue !== ""){
            $("#"+selectedValue).show();
        }
    }

    function hiddenAll(){
        $("#detailTabDiv").hide();
        $("#L01-R01").hide();
        $("#L02-R01").hide();
        $("#L03-R02").hide();
        $("#L04-R02").hide();
    }

    // 显示加载遮罩
    function showLoadingMask() {
        $("#loadingMask").addClass("active");
    }

    // 隐藏加载遮罩
    function hideLoadingMask() {
        $("#loadingMask").removeClass("active");
    }
</script>
</html>
